<template>
    <div class="house-wrapper">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{path: '/home'}"><i class="el-icon-setting"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item>导航</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-table :data="tableData" border style="width: 100%" ref="multipleTable">
            <el-table-column prop="m_id" label="ID" width="88"></el-table-column>
            <el-table-column prop="m_name" label="名称" sortable width="180"></el-table-column>
            <el-table-column prop="m_path" label="路径" width="180"></el-table-column>
            <el-table-column prop="m_sort" label="排序"></el-table-column>
            <el-table-column prop="m_is_open" label="显示">
                <template  scope="tr">
                    <el-switch
                        v-model="tr.row.m_is_open"
                        on-value="1"
                        off-value="0"
                        on-text="ON"
                        off-text="OFF">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template scope="scope">
                    <el-button size="small"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="postData.page"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="postData.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="resultTotal">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import Objres from '@/components/common/ObjResult';
    export default {
        data () {
            return {
                tableData: null,
                currentPage: 5,
                resultTotal: 0,
                postData: {
                    'pageSize': 10,
                    'page': 1,
                    'searchValue': '',
                    'orderBy': 'm_sort',
                    'orderType': '1'
                },
                webUrl: this.WEB_CONFIG.weburl
                // webUrl: 'http://t.fo'
            };
        },
        methods: {
            handleSizeChange (val) {
                this.postData.pageSize = val;
                this.getResultByPage();
                // console.log(`每页 ${val} 条`);
            },
            handleCurrentChange (val) {
                this.page = val;
                this.getResultByPage();
                // console.log(`当前页: ${val}`);
            },
            handleEdit (index, row) {
                this.$router.push('/menu/' + row.m_id);
            },
            handleDelete (index, row) {
            },
            getResultByPage () {
                let self = this;
                let token = localStorage.getItem('admin-token');
                console.log(token);
                if (token) {
                    this.$http.post(
                        self.webUrl + '/admin/menu/list?token=' + token,
                        self.postData,
                        {'emulateJSON': true}
                        // {headers: {'Content-Type': 'multipart/form-data'}}
                    ).then((response) => {
                        let res = response.body;
                        // console.log(res);
                        if (res.status === Objres.ObjResult.RESULT_OK) {
                            self.tableData = res.data.result;
                            self.resultTotal = parseInt(res.data.total);
                        }
                    });
                } else {
                    this.$message({message: '请登陆', type: 'error'});
                    self.$router.push('/login');
                }
            }

        },
        created () {
            this.getResultByPage();
        }
    };
</script>
